<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Vmall会员管理</title>
		<link rel="stylesheet" href="css/gzh/admin.css" />
		<link rel="stylesheet" href="css/new.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/font-awesome.css" />
		<link rel="stylesheet" href="css/adminSystem.css" />
		<script src="lib/vue.js"></script>
		<script src="js/gzh/jquery-3.3.1.min.js"></script>
		<script src="lib/bootstrap.min.js"></script>
		<style type="text/css">
.itemInfo>td{
	border-top: 1px solid #f4f4f4;
	    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
th:nth-child(1){
	width:35px;
}
th:nth-child(2){
	width:700px;
}
td:nth-child(1){
	width:35px;
}
td:nth-child(2){
	width:700px;
}
td:nth-child(3){
	width:160px;
}
td:nth-child(4){
	width:97px;
}
td:nth-child(5){
	width:98px;
}
td:nth-child(6){
	width:98px;
}
td:nth-child(7){
	width:160px;
}
td:nth-child(8){
	width:98px;
}
td:nth-child(9){
	width:98px;
}
td:nth-child(10){
	width:99px;
}
#pageSelect {
	max-width: 1266px;
	height: 100px;
	padding: 30px 30px;
}

#selectContent {
	float: right;
	margin: auto 20px;
	height: 40px;
}
#selectContent .disablebtn{
	disabled:true;
	pointer-events: none;
	opcity:0.5;
	color:gray;
}
#selectContent .option {
	width: 30px;
	height: 30px;
	line-height: 30px;
	border: 1px solid gainsboro;
	text-align: center;
	float: left;
	margin: 5px;
	color: #666;
}

#selectContent .option:hover {
	background: #3A3A3A;
	color: white;
}
		</style>
	</head>

	<body class="fixed skin-blue">
		<div class="wrapper" style="height: auto; min-height: 100%;">
			<header class="main-header">
				<div class="logo">
					<span class="logo-lg"><b>VMALL</b>后台管理</span>
				</div>
				<nav class="navbar navbar-static-top">
					<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
						<span class="sr-only glyphicon glyphicon-th-list"></span>
					</a>

					<!--顶部菜单 开始-->
					<div id="menu" class="navbar-custom-menu">
						<ul class="nav navbar-nav" name="topMenu">
							<li >
								<a hidefocus="true" href="/goods/goods_list">商品</a>
							</li>
							<li class="active">
								<a hidefocus="true" href="/member/member_list">会员</a>
							</li>
							<li>
								<a hidefocus="true" href="/order/order_list">订单</a>
							</li>
							<li>
								<a hidefocus="true" href="/market/pro_rule_list">营销</a>
							</li>
							<li>
								<a hidefocus="true" href="/market/user_reg">统计</a>
							</li>
							<li >
								<a hidefocus="true" href="/system/default">系统</a>
							</li>
							<li>
								<a hidefocus="true" href="/tools/db_bak">工具</a>
							</li>
							<li>
								<a hidefocus="true" href="/plugins/plugin_list">插件</a>
							</li>
							<li>
								<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
							</li>
						</ul>
					</div>
					<!--顶部菜单 结束-->
				</nav>
			</header>

			<aside id="admin_left" class="main-sidebar">
				<section class="sidebar" style="height: auto;">
					<div class="user-panel">
						<div class="pull-left image">

							<i class="glyphicon glyphicon-user"></i>
						</div>
						<div class="pull-left info">
							<p>admin</p>
							<a href="#">超级管理员</a>
						</div>
					</div>

					<ul class="sidebar-menu tree" data-widget="tree">
						<li class="header">会员模块菜单</li>
						<li class="treeview menu-open">
							<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">
								<i class="fa fa-home" name="ico" menu="会员管理"></i>
								<span>会员管理</span>
								<span class="pull-right-container">
									<i class="glyphicon glyphicon-chevron-down pull-right"></i>
								</span>
							</a>
							<ul id="collapseOne" class="treeview-menu" name="leftMenu" style="display: block;">
								<li class="active">
									<a href="/system/default"><i class="fa fa-circle-o"></i>会员列表</a>
								</li>
								
							</ul>
						</li>
						<li class="treeview">
							<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">
								<i class="fa fa-wrench" name="ico" menu="信息处理"></i>
								<span>信息处理</span>
								<span class="pull-right-container">
									<i class="glyphicon glyphicon-chevron-left pull-right"></i>
								</span>
							</a>
							<ul id="collapseTwo" class="treeview-menu" name="leftMenu">
								<li>
									<a href="/system/conf_base"><i class="fa fa-circle-o"></i>评价管理</a>
								</li>
								<li>
									<a href="/system/conf_guide"><i class="fa fa-circle-o"></i>咨询管理</a>
								</li>
							</ul>
						</li>
						</ul>	
				</section>
			</aside>
			<div id="admin_right" class="content-wrapper" style="min-height: 507px;">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li>
							<i class="home-icon fa fa-home"></i>
							<a href="#">会员</a>
						</li>
						<li>
							<a href="#">会员管理</a>
						</li>
						<li class="active">会员列表</li>
					</ul>
				</div>
				<div class="content" style="min-height:880px">
					<caption>
						
						<button type="button" class="btn btn-primary" id="checkAll" data='true'><i class="fa fa-check"></i>全选</button>
						<div class="btn-group">
							<button type="button" class="btn btn-primary" id="delete"><i class="fa fa-cogs"></i>批量删除</button>
						</div>
					</caption>
					<p id="searchTitle">会员总计：{{listCount}}位</p>
					<table class="table table-list">
						<tr>
							<th></th>
							<th>用户名</th>
							<th>会员等级</th>
							<th>姓名</th>
							<th>性别</th>
							<th>积分</th>
							<th>注册时间</th>
							<th>手机</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</table>
					<div  id="searchResult">
						<table class="table table-list">
						<tbody>
						<div id="itemList">
							<item v-for="item in items" v-bind:key="item.userid" v-bind:item="item"></item>
						</div>
						</tbody>
						</table>
							<div id="pageSelect">
								<div id="selectContent">
									<a  v-bind:class="{disablebtn:currentPage<=1}"
										onClick="changePage(this)" 
										:data-pagenum="1"
									 href="#"><div class="option">|<</div></a>
									<a v-bind:class="{disablebtn:currentPage<=1}"
										onClick="changePage(this)" 
										:data-pagenum="currentPage-1"
									 href="#"><div class="option"><</div></a>
									<a v-bind:class="{disablebtn:pageNum==currentPage}"
										onClick="changePage(this)" 
										:data-pagenum="pageNum"
									 	v-for="pageNum in pages" href="#">
										<div class="option">{{pageNum}}</div>
									</a>
									<a v-bind:class="{disablebtn:currentPage>pages-1}"
										onClick="changePage(this)" 
										:data-pagenum="currentPage-(-1)" href="#"><div class="option">></div></a>
									<a v-bind:class="{disablebtn:currentPage>pages-1}"
										onClick="changePage(this)" 
										:data-pagenum="pages"  href="#"><div class="option">>|</div></a>
								</div>
							</div>
						</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				$('#collapseone').collapse('show')
			});
			$(function() {
				$('#collapseTwo').collapse('hide')
			});
			$(function() {
				$('#collapseThree').collapse('hide')
			});
			$(function() {
				$('#collapseFour').collapse('hide')
			});
			$(function() {
				$('#collapseFive').collapse('hide')
			});
			$(function() {
				$('#collapseSix').collapse('hide')
			});
			$(function() {
				$('#collapseSeven').collapse('hide')
			});
			$(function(){
				$("#checkAll").click(function(){
					if ($(this).attr("data")=="true") {
						$(".itemInfo :checkbox").prop("checked", true);
						$(this).attr("data",false);
					}
					else if($(this).attr("data")=="false"){
						$(".itemInfo :checkbox").prop("checked", false);	
						$(this).attr("data",true);
					}
					
				})
			})
		</script>
		<div class="modal fade" id="this" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 650px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×            </button>
						<h4 class="modal-title" id="myModalLabel">
		               消息          </h4>
					</div>
					<div class="modal-body" style="overflow: hidden;">
						<div class="container1">
							确定要删除么？

						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消            </button>
						<button type="button" class="btn btn-primary" id="trueDelete">
		               确定           </button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
<script type="text/javascript">
	//将商品列表的数组型字符串转为json数组型对象
	var jsonstr='${requestScope.items}';
	console.log("jsonstr:"+jsonstr);
	var itemList=$.parseJSON(jsonstr);
	console.log(itemList);
	var listCount='${requestScope.listCount}';
	console.log("listCount:"+listCount);
	var pagesize=2;
	var pages=Math.ceil(listCount/2);//总页数
	console.log("pages:"+pages);
	//当前页
	var currentPage='${requestScope.currentPage}';
	console.log("currentPage:"+currentPage);
	var searchTitle=new Vue({
		el:"#searchTitle",
		data:{
			listCount:listCount,
		}
	});
	
	//商品列表
	Vue.component('item', {
		props: ['item'],
		template:`
		<tr class="itemInfo">
			
			<td id="td1"><input name="id[]" type="checkbox" id="id[]" class="chk" v-bind:value="item.userid"></td>
			<td>
				<a href="#">{{item.nickname}}</a>
			</td>
			<td>
				{{item.level}}
			</td>
			<td>
				{{item.name}}
			</td>
			<td>
				{{item.sex}}
			</td>
			<td>
				{{item.points}}
			</td>
			
			
			<td>
				{{item.register_time}}
			</td>
			<td>
				{{item.tel}}
			</td>
			<td>
				{{item.ifexist}}
			</td>
			
			<td>
				<a class="editUser" href="#"><i class="operator fa fa-edit"></i><span style="color:white">{{item.userid}}</span></a>
				<a class="deletethis" data-toggle="modal" data-target="#this" v-bind:value="item.userid"><i class="operator fa fa-close" v-bind:value="item.userid"></i><span style="color:white">{{item.userid}}</span></a>
	
			</td>
		</tr>	
		`
	});
	
	var item = new Vue({
		el: "#itemList",
		data: {
			items: itemList,
		},
	});
	var pageSelect=new Vue({
		el:"#pageSelect",
		data:{
			pages:pages,
			currentPage:currentPage,
		}
	});
	
	//根据页数跳往相应的页数，fcid和scid以及排序方式为默认的
	function changePage(obj){
		var pageNum=$(obj).data("pagenum");
		location.href="AdminMember?method=basefun&"
				+"&viewPage="+pageNum;
		
	}
	
	$(document).ready(function(){
		
		$("#delete").click(function(){
			var str="";
			    var sel=document.getElementsByName("id[]");//获取checkbox的值
			    for( var i=0;i<sel.length;i++){
			        if(sel[i].checked==true){
				str+=sel[i].value+",";
			}
		}
			$.get("AdminMember?method=delete",{str:str},function(e){
    			if (e=="ok") {
    				alert("删除成功");
    				window.location.href="AdminMember";
    			} 
    			else{
    				alert("请选择商品！");
    			}
    		});
		});
		$(".deletethis").click(function(){
			var userid= $(this).text();
			$("#trueDelete").click(function(){
			$.get("AdminMember?method=delete",{str:userid},function(e){
    			if (e=="ok") {
    				alert("删除成功");
    				window.location.href="AdminMember";
    			} 
    			else{
    				alert("登录失败");
    				}
    			});
			})
		})
		$(".editUser").click(function(){
			var userid= $(this).text();
    		location.href="AdminMember?method=addUser&&userid="+userid;
		})
	})
</script>

	</body>

</html>